<template>
	<view class="account-page">
		<view class="header">
			<text class="title">手机号绑定了多个账号</text>
			<text class="subtitle">轻触头像选择登录账号</text>
		</view>

		<view class="account-list">
			<view v-for="account in accounts" :key="account.id" class="account-item" @tap="selectAccount(account)">
				<image class="avatar" :src="account.avatar" mode="aspectFill" />
				<view class="info">
					<text class="name">{{ account.nickName }}</text>
					<text class="desc">ID {{ account.id }} | {{ account.studioName }}</text>
				</view>
			</view>
		</view>
		<!-- 输入密码弹框 -->
		<uni-popup ref="passwordRef" type="bottom" @change="passwordChange" background-color="#fff"
			border-radius="32rpx 32rpx 0 0">
			<view class="popup-content">
				<view class="popup-title">
					<text>请输入密码</text>
					<text class="close-icon" @click="showPassword = false">×</text>
				</view>
				<view class="input-group">
					<input :password='!loginInfo.iseye' type="text" v-model="loginInfo.password" placeholder="请输入密码" class="input" />
					<view class="input-group-fixed">
						<uni-icons class="clear-icon" v-show="loginInfo.password" @click="loginInfo.password = ''" type="closeempty" size="20"></uni-icons>
						<uni-icons class="eye-icon" @click="loginInfo.iseye = !loginInfo.iseye" :type="loginInfo.iseye?'eye':'eye-slash'" size="22"></uni-icons>
					</view>
				</view>
				<view @click="toUserAgree(`/pages/login/verifyPhone?phone=${params.phone}&userId=${loginInfo.userId}`)"
					class="forget">忘记密码</view>
				<button class="xjs-btn-primary" @click="loginInfo.passwordSubmitAgain">登录</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed, watch, reactive } from 'vue';
	import { useLogin, useLoginWx,useLoginApp, useLoginPassword, isRegisterUser } from '@/hooks/useLogin';
	onLoad((data) => {
		params.value = data;
		getList(data.phone);
	});
	const getList = async (phone) => {
		let phoneRes : any = await isRegisterUser(phone);
		accounts.value = phoneRes.data;
	};
	const params = ref<any>({});
	const accounts = ref([]);
	// 弹框状态-密码
	const showPassword = ref(false);
	const passwordChange = (e : { show : boolean }) => {
		if (!e.show) {
			showPassword.value = false;
		}
	};
	const passwordRef = ref();
	watch(showPassword, (newVal) => {
		if (newVal) {
			passwordRef.value.open();
		} else {
			passwordRef.value.close();
		}
	});
	const loginInfo = reactive<any>({
		password: '',
		userId: '',
		iseye:false,
		passwordSubmitAgain: async () => {
			let blankSpaceReg = /^\S*$/; //非空格正则
			let loginPswReg = /^.{6,20}$/; //密码正则
			let notzhongwen = /^[^\u4e00-\u9fa5]+$/
			if (!loginInfo.password) {
				uni.showToast({
					title: '密码不能为空',
					icon: 'none'
				});
				return;
			}
			if (!blankSpaceReg.test(loginInfo.password)) {
				uni.showToast({
					title: '密码中不可输入空格',
					icon: 'none'
				});
				return;
			}
			if (!loginPswReg.test(loginInfo.password) || !notzhongwen.test(loginInfo.password)) {
				uni.showToast({
					title: '密码错误，请重新输入',
					icon: 'none'
				});
				return;
			}
			useLoginPassword({
				mobile: params.value.phone,
				password: loginInfo.password,
				countryCode: params.value.areaCode,
				userId: loginInfo.userId,
				step: 4
			});
			showPassword.value = false;
		}
	});

	const selectAccount = (account) => {
		// TODO: 处理账号选择逻辑
		if (params.value.password) {
			showPassword.value = true;
			loginInfo.userId = account.id;
		} else if (params.value.onClickLogin) {
			useLoginWx({
				phone: params.value.phone,
				userId: account.id,
				refereeId: "",
				step: 3
			});
		} else if (params.value.onClickLoginApp) {
			useLoginApp({
				phone: params.value.phone,
				userId: account.id,
				refereeId: "",
				step: 3
			});
		} else {
			useLogin({
				mobile: params.value.phone,
				code: params.value.verifyCode,
				countryCode: params.value.areaCode,
				userId: account.id,
				step: 4
			});
		}
	};
	const toUserAgree = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss" scoped>
	.account-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 80rpx 32rpx 40rpx;
		box-sizing: border-box;

		.header {
			text-align: center;
			padding: 0 0 80rpx;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 16rpx;
				display: block;
			}

			.subtitle {
				font-size: 28rpx;
				color: #999;
				display: block;
			}
		}

		.account-list {
			.account-item {
				display: flex;
				align-items: center;
				padding: 30rpx;
				background: #fff;
				border-radius: 24rpx;
				margin-bottom: 40rpx;

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.info {
					flex: 1;

					.name {
						font-size: 32rpx;
						color: #333;
						margin-bottom: 8rpx;
						display: block;
						font-weight: bold;
					}

					.desc {
						font-size: 24rpx;
						color: #999;
						display: block;
					}
				}
			}
		}


		.popup-content {
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 40rpx;

			.popup-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				font-size: 32rpx;
				font-weight: 500;

				.close-icon {
					font-size: 48rpx;
					color: #999;
					line-height: 1;
				}
			}
			.forget {
				margin: 24rpx 0;
				text-align: right;
				font-size: 24rpx;
				color: #666;
			}
		}
	}
</style>